<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {{template  "link/customer/link.html" .}}
</head>
<body>
{{template "link/customer/nav.html" . }}
{{template "link/customer/header.html" .}}
<div class="layui-main">
    <div class="layui-row">
        <legend class="registerWord">注册界面</legend>
    </div>
    <div class="layui-row">
        <div class="layui-col-lg-offset3 layui-col-lg6">
            <div class="register">
                <form class="layui-form" action="/customer/register" method="post">
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input class="layui-input" type="text" placeholder="请输入账号" name="username"
                                   lay-verify="required">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <select class="layui-input" name="sex">
                                <option selected="selected" value="男">男</option>
                                <option valut="女">女</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" class="layui-input" name="password">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">重复密码</label>
                        <div class="layui-input-block">
                            <input type="password" class="layui-input" name="password2">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="email" lay-verify="email">
                        </div>
                    </div>
                    <div class="layui-form-item selectArea">
                        <div>
                            <label class="layui-form-label" id="addr">地址</label>
                        </div>
                        <select  id="province" name="province">
                            <option value="1">请选择省</option>
                        </select>

                        <select  id="city" name="city">
                            <option value="2">请选择市</option>
                        </select>

                        <select  id="area" name="area">
                            <option value="3">请选择区</option>
                        </select>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">街道</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="address">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">电话</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="userphone">
                        </div>
                    </div>
                    <div class="layui-row registerBtn">
                        <div class="layui-col-lg-offset3 layui-col-lg3">
                            <button class="layui-btn">重置</button>
                        </div>
                        <div class="layui-col-lg-offset3 layui-col-lg3">
                            <button class="layui-btn" id="regBtn">注册</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{{template  "link/customer/footer.html" .}}
<script src="/static/js/citys.js"></script>
<script>
    layui.config({
        base: '/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
    }).use(['jquery', 'layer', 'form'], function (args) {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        getProvince();
        form.render("select");
        $("input").blur(function () {
            var inputValue = $(this).val();
            if ($.trim(inputValue) == '' || $.trim(inputValue) == null) {
                layer.tips('不能为空', this);
                return false;
            }
        });
        $("input[name='password").blur(function () {
            var password = $(this).val();
            if ($.trim(password).length < 6) {
                layer.tips("密码长度过短，需要6个字符以上", this);
                return false;
            }
        });
        $("input[name='password2'] ").blur(function () {
            if ($("input[name='password']").val() != $(this).val()) {
                layer.tips("密码不一致", this);
            }
        });
        $("input[name='email']").blur(function () {
            var email = $(this).val();
            //验证邮箱
            var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
            if (!reg.test(email)) {
                layer.tips("邮箱格式错误", this);
                return false;
            }
        });
        $("input[name='userphone']").blur(function () {
            function isPhoneNo(phone) {
                var pattern = /^1[34578]\d{9}$/;
                return pattern.test(phone);
            }

            if (!isPhoneNo($(this).val())) {
                layer.tips("手机格式错误", this);
                return false;
            }
        });

        form.on('select', function(data){
            if (data.elem == $("#province")[0]){
                chooseProvince(data.elem);
            }
            if (data.elem == $("#city")[0]){
                chooseCity(data.elem);
            }
            form.render();

        });

        $("#regBtn").click(function () {

           if($.isNumeric($("#province").val())){
               layer.tips("请选择",$("#addr"),{
                   tips: 2
               })
               return false;
            }
            if($.isNumeric($("#city").val())){
                layer.tips("请选择",$("#addr"),{
                    tips: 2
                })
                return false;
            }
            if($.isNumeric($("#area").val())){
                layer.tips("请选择",$("#addr"), {
                    tips: 2
                })
                return false;
            }
        });

    });
</script>
</body>
</html>